<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

<script>

// 微队列：[f3,f9,f5,f7,f6]
// 宏队列：[f1]
// 执行栈：
// setTimeout(); f1加入宏队列
// new Promise();
// f2();
    // console.log( 1 );
    // resolve(); f3加入微队列
// new Promise();
// f8();
    // console.log( 7 );
    // resolve(); f9加入微队列

// 此时，JS引擎空闲了，优先处理微队列
// f3();
    // console.log( 2 );
    // new Promise();
    // f4();
        // console.log( 3 );
        // resolve(); f5加入微队列
    // f3执行完成后，f7加入微队列

// 此时，JS引擎空闲了，优先处理微队列
// f9();
    // console.log( 8 );

// 此时，JS引擎空闲了，优先处理微队列
// f5();
    // console.log( 4 );
    // f5执行完成后，f6加入微队列

// 此时，JS引擎空闲了，优先处理微队列
// f7();
    // console.log( 6 );

// 此时，JS引擎空闲了，优先处理微队列
// f6();
    // console.log( 5 );

// 此时，JS引擎空闲了，微队列处理完了，处理宏队列
// f1();
    // console.log( 0 );


setTimeout(()=>{// f1
    console.log( 0 );
})
new Promise((resolve,reject)=>{// f2
    console.log( 1 );
    resolve();
})
.then(()=>{// f3
    console.log( 2 );
    new Promise((resolve,reject)=>{// f4
        console.log( 3 );
        resolve();
    })
    .then(()=>{// f5
        console.log( 4 );
    })
    .then(()=>{// f6
        console.log( 5 );
    })
    // return undefined
})
.then(()=>{// f7
    console.log( 6 );
})
new Promise((resolve,reject)=>{// f8
    console.log( 7 );
    resolve();
})
.then(()=>{// f9
    console.log( 8 );
})


</script>
</body>
</html>